import React from 'react';
import ReactDOM from 'react-dom/client';
import "./index.css";

//语法：jsx--> js混标签
//变量，一元运算，三元运算，
//循环(数组自动循环)-->不支持for循环，不支持if else
// forEach可以循环，但是没有return
// 一般渲染标签结构用 map
// 不要忘记加 key
// 循环对象, 可以将对象的key,value以数组的形式提出来循环
// Object.keys()  Object.values()  Object.entries()
// null 和 undefined 代表空元素
// <></> 不渲染的标签
// jsx 样式class--->className
// style 不能直接设置样式, style的值必须是对象(不能直接放，要用jsx语法放)
// 只有style可以写两个花括号 style={{color:"green"}}


let num=100;
let arr=["苹果","香蕉","萝卜","黄瓜"];
let obj={
  name:"lili",
  age:18,
  n:1001
}

console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));//二维数组

let styleobj={
  "color":"red",
  "border":"10px solid blue"
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1 className="one">{arr}</h1>
    <h1 style={styleobj}>{num}--{++num}</h1>
    <h1 style={{color:"green"}}>{num}--{++num}</h1>
    {num > 10 ? undefined:<h2>嘿嘿嘿</h2>}
    {
       arr.map(item=>{
          return <h2 key={item}>{item}</h2>
       })
    }
    {
      Object.entries(obj).map((item,index)=>{
        return <h1 key={index}>{item[0]}---{item[1]}</h1>
      })
    }
    
   </> 
);

